<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>我的足球网</title>
	<style type="text/css">
		.snow-container {
			z-index: -2;
			overflow: hidden;
			width: 100%;
			max-width: 100%;
			height: 100%;
			pointer-events: none;
			/*阻止任何事件*/
		}

		.snow {
			z-index: -2;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			/*垂直、水平居中*/
			margin: auto;
			transform: translate(0, -100%);
			animation: snowing infinite linear;
			pointer-events: none;
		}

		.foreground {
			z-index: -2;
			animation-duration: 25s;
			background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png');
		}

		.foreground.layer {
			animation-delay: 12.5s;
			/*推迟时间是总时间/2*/
		}

		.medium {
			z-index: -2;
			animation-duration: 35s;
			background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png');
		}

		.medium.layer {
			animation-delay: 17.5s;
		}

		.background {
			z-index: -2;
			animation-duration: 45s;
			background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png');
		}

		.background.layer {
			animation-delay: 22.5s;
		}

		@keyframes snowing {
			100% {
				transform: translate(15%, 100%);
			}
		}

		html {
			height: 100%;
			background: linear-gradient(to left top, rgba(14, 203, 243, 1.00), rgba(248, 21, 56, 1.00));
		}

		body {
			overflow: hidden;
		}

		@font-face {
			font-family: 'AoYun';
			src: url('./font/A.ttf');
		}

		.link {
			/*		box-shadow: 10px 10px 5px #888888;*/
			text-decoration: none;
			font-family: 'AoYun';
			color: rgba(229, 78, 0, 1.00)
		}

		.link:hover {
			color: rgba(12, 200, 115, 1.00);
		}
	</style>
</head>

<body>
	<table style="margin-top: 50px;" width="550" border="0" align="center">
		<tbody>
			<tr>
				<td height="50" colspan="2" align="center" valign="middle">
					<h1 style="font-family: 'AoYun'">我的足球网</h1>
				</td>
			</tr>
			<tr>
				<td width="364" height="417">
					<image style="box-shadow: 0 0 10px #000000; border-radius: 7px;"
						src="https://img1.imgtp.com/2022/03/25/8OT8bpEy.jpg" />
				</td>
				<td align="center">
					<p style="font-size: 30px"> <a class="link" href="./photo/photo.html">足球明星</a></p>
					<p style="font-size: 30px"> <a class="link" href="./aboutme/me.html">我与足球</a> </p>
					<p style="font-size: 30px"> <a class="link" href="./news/news.html">足球新闻</a> </p>
					<p>
						<image style="box-shadow: 0 0 10px #000000; border-radius: 7px;"
							src="https://img1.imgtp.com/2022/03/25/A3NQfF2s.GIF" />
					</p>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center">永发万岁万岁万万岁！！！</td>
			</tr>
		</tbody>
		<div
			style="opacity:0.7; box-shadow: 0 0 10px #000000;position: fixed; margin:auto; left:0; right:0; top:50px; z-index: -1; width: 850px; height: 540px; filter: blur(1px); background: url('https://img1.imgtp.com/2022/03/25/XzPXAEGA.jpg') no-repeat center 0px; background-size: cover; padding: 10px; border-radius: 7px;">
		</div>
	</table>
	<div class="snow-container">
		<div class="snow foreground"></div>
		<div class="snow foreground layer"></div>
		<!--延迟衔接-->
		<div class="snow medium"></div>
		<div class="snow medium layer"></div>
		<div class="snow background"></div>
		<div class="snow background layer"></div>
	</div>
</body>

</html>
<!--https://pan.bilnn.com/api/v3/file/sourcejump/81Km3bhW/iSr5IFwoAgBolcgKUTPDkiTjcVRPlq2k87IsJ4VIvyw*-->
<!--https://img1.imgtp.com/2022/03/25/lUQsnqd3.jpg-->
<!--https://img1.imgtp.com/2022/03/25/g8RaLT4h.jpg-->
<!--https://img1.imgtp.com/2022/03/25/jnHsf72l.jpg-->